<!--
 * @Author: jiu yin
 * @Date: 2025-03-06 17:29:58
 * @LastEditTime: 2025-08-21 10:48:52
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \one-half-vue3-2025-3-7\src\components\ProTable\index.vue
-->
<template>
	<div>
		<!-- @vue-ignore -->
		<PlusPage :columns="tableConfig" :request="getList" ref="plusPageInstance" @paginationChange="handlePaginationChange">
			<template #search-footer="{ handleReset, handleSearch, handleUnfold, isShowUnfold }">
				<div style="display: flex">
					<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
					<el-button :icon="Refresh" @click="handleReset">重置</el-button>
					<el-button :icon="Refresh" @click="upload(handleSearch)">下载</el-button>
					<a>展开</a>
					<!-- <el-button :icon="isShowUnfold ? ArrowUp : ArrowDown" @click="handleUnfold">
						{{ isShowUnfold ? "收起" : "展开" }}
					</el-button> -->
				</div>
			</template>
		</PlusPage>
	</div>
</template>

<script lang="tsx" setup>
	import type { PlusColumn, PageInfo, PlusPageInstance } from "plus-pro-components";
	import { gs_order_list } from "@/api";

	const plusPageInstance = ref<PlusPageInstance | null>();

	const getList = async (query: PageInfo) => {
		let params = {
			...query,
			limit: query.pageSize,
			page: query.page || 1,
			type: 4,
		};
		let { data } = await gs_order_list(params);
		return { data: data.data, success: true, total: data.total };
	};
	const upload = (handleSearch: any) => {
		let params = plusPageInstance.value?.getSearchFieldsValue();
		console.log(params);
	};

	const handlePaginationChange = (pageInfo: PageInfo) => {
		console.log(pageInfo);
	};
	const tableConfig: PlusColumn[] = [
		{
			label: "名称",
			prop: "goods_name",
		},
		{
			label: "状态",
			prop: "status",
			valueType: "select",
			options: [
				{
					label: "未解决",
					value: "0",
					color: "red",
				},
				{
					label: "已解决",
					value: "1",
					color: "blue",
				},
				{
					label: "解决中",
					value: "2",
					color: "yellow",
				},
				{
					label: "失败",
					value: "3",
					color: "red",
				},
			],
		},
		{
			label: "标签",
			prop: "tag",
			valueType: "tag",
			fieldProps: (value: string) => {
				return { type: value };
			},
		},
		{
			label: "执行进度",
			prop: "progress",
			valueType: "progress",
			fieldProps: (value: number) => {
				const data = value >= 80 ? { status: "success" } : value > 50 ? { status: "exception" } : { status: "warning" };
				return data;
			},
		},
		{
			label: "开关",
			prop: "switch",
			hideInSearch: true,
			valueType: "switch",
			editable: true,
		},
		{
			label: "时间",
			prop: "time",
			valueType: "date-picker",
			hideInForm: true,
		},
	];
</script>
